<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <title>Document</title>
  </head>
  <body onselectstart="event.returnValue=false">
    <header>
      <ul>
        <ol>
          <li><a href="./index.html">毛萌辉</a></li>
          <li><a href="./list2.html">手机逛淘宝</a></li>
        </ol>
        <ol>
          <li><a href="./index.html">首页</a></li>
          <li><a href="">我的淘宝</a></li>
          <li><a href="">收藏夹</a></li>
          <li><a href="./list2.html">商品分类</a></li>
        </ol>
      </ul>
    </header>
    <div class="banner">
      <!-- <div class="blocks"><img src="../img/images/baidu.jpg" alt="" /></div> -->
      <div class="sologn">多 块 好 省 只为品质生活</div>
    </div>

    <div class="box">
      <h2>登录页面</h2>
      <div>
        <span>用户名:</span>
        <input type="text" name="name" placeholder="用户名" />
      </div>
      <div>
        <span>密码: </span>
        <input type="text" name="pwd1" placeholder="密码" />
      </div>
      <!-- 验证滑块 -->
      <div id="slide_box">
        滑动验证
        <div id="slide_xbox">
          <div id="btn"></div>
        </div>
      </div>
      <button>登录</button><br />
      <p>没有账号？ <a href="./reg2.html">去注册</a></p>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/login.js"></script>
    <script src="../js/inde.js"></script>

    <script>
      //点击登录按钮事件
      $("button").click(function () {
        //向服务器发送ajax请求
        //携带参数是userName 和userPwd
        //locked判断滑动验证是否成功
        if (!locked) {
          alert("验证未通过");
          return;
        } else {
          const xhr = myPromiseJQueryAjax(
            "../server/goods_login.php",
            "post",
            {
              userName: $('[name="name"]').val(),
              userPwd: $('[name="pwd1"]').val(),
            },
            "json"
          );
          //请求成功 返回的数据操作
          xhr.then(function (res) {
            console.log(res);
            if (res.result === 1) {
              //如果返回数据的result属性为1，登录成功
              //设定cookie信息
              mySetCookie("login", 1, 7 * 24 * 60 * 60, "/");
              //跳转页面
              if (window.confirm("您登陆成功，点击确定跳转来时候的页面")) {
                window.location.href = `${window.location.search.substr(5)}`;
              }
            } else if (res.result === 0) {
              //登录失败
              window.alert("您的账号密码有误，请您检查后，重新登录");
            }
          });
        }
      });
    </script>
  </body>
</html>
